<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>编辑会员资料 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4A7BFF;
            --primary-light: #E8F0FF;
            --secondary: #FF5757;
            --success: #28C76F;
            --warning: #FF9F43;
            --dark: #2D3436;
            --gray: #6C757D;
            --light-gray: #F8F9FA;
            --border: #E1E4E8;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-gray);
            color: var(--dark);
            padding-top: 56px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--dark);
            font-size: 20px;
        }
        
        .save-btn {
            color: var(--primary);
            font-size: 16px;
            font-weight: 500;
        }
        
        /* 主容器 */
        .container {
            padding: 16px;
        }
        
        /* 头像上传区 */
        .avatar-section {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .avatar-container {
            position: relative;
            margin-bottom: 16px;
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-light);
        }
        
        .avatar-upload {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid white;
            cursor: pointer;
        }
        
        .upload-text {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 8px;
        }
        
        .upload-hint {
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 表单区域 */
        .form-section {
            background-color: white;
            border-radius: 12px;
            padding: 0 20px 20px;
            margin-bottom: 16px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 16px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            color: var(--dark);
        }
        
        .form-control {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 15px;
            transition: border-color 0.2s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(74, 123, 255, 0.2);
        }
        
        .form-hint {
            font-size: 12px;
            color: var(--gray);
            margin-top: 6px;
        }
        
        textarea.form-control {
            min-height: 100px;
            resize: vertical;
            line-height: 1.5;
        }
        
        /* 性别选择 */
        .gender-select {
            display: flex;
            gap: 16px;
        }
        
        .gender-option {
            flex: 1;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .gender-option.selected {
            border-color: var(--primary);
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        /* 生日选择器 */
        .date-picker {
            display: flex;
            gap: 10px;
        }
        
        .date-picker select {
            flex: 1;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 15px;
            color: var(--dark);
            background-color: white;
        }
        
        /* 标签选择 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 8px;
        }
        
        .tag-item {
            padding: 6px 12px;
            background-color: var(--light-gray);
            border-radius: 20px;
            font-size: 14px;
            color: var(--dark);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .tag-item.selected {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .add-tag {
            padding: 6px 12px;
            border: 1px dashed var(--border);
            border-radius: 20px;
            font-size: 14px;
            color: var(--gray);
            cursor: pointer;
        }
        
        /* 会员专属选项 */
        .vip-only {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--primary);
            margin-top: 6px;
        }
        
        .vip-badge {
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 4px;
        }
        
        /* 底部安全提示 */
        .safety-tip {
            background-color: var(--primary-light);
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 13px;
            color: var(--primary);
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 20px;
        }
        
        .safety-tip i {
            margin-top: 1px;
        }
        
        /* 底部操作区 */
        .action-buttons {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }
        
        .btn {
            flex: 1;
            padding: 12px 0;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-cancel {
            background-color: white;
            color: var(--dark);
            border: 1px solid var(--border);
        }
        
        .btn-save {
            background-color: var(--primary);
            color: white;
            border: none;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">编辑会员资料</div>
        <button class="nav-btn save-btn" id="saveBtn">保存</button>
    </div>
    
    <!-- 主容器 -->
    <div class="container">
        <!-- 头像上传区 -->
        <div class="avatar-section">
            <div class="avatar-container">
                <img src="https://picsum.photos/id/64/200/200" alt="当前头像" class="profile-avatar">
                <div class="avatar-upload" id="changeAvatar">
                    <i class="fas fa-camera"></i>
                </div>
            </div>
            <div class="upload-text">更换头像</div>
            <div class="upload-hint">支持JPG、PNG格式，建议尺寸400x400px</div>
        </div>
        
        <!-- 基本信息表单 -->
        <div class="form-section">
            <div class="section-title">基本信息</div>
            
            <div class="form-group">
                <label class="form-label" for="username">用户名</label>
                <input type="text" class="form-control" id="username" value="张小明">
                <div class="form-hint">用户名一旦设置，30天内不可修改</div>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="nickname">昵称</label>
                <input type="text" class="form-control" id="nickname" value="旅行的小明">
                <div class="form-hint">最多12个字符，可使用中英文、数字和下划线</div>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="bio">个人简介</label>
                <textarea class="form-control" id="bio">热爱生活的旅行摄影师 | 环球旅行家，分享旅途中的美好瞬间。</textarea>
                <div class="form-hint">最多140个字符</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">性别</label>
                <div class="gender-select">
                    <div class="gender-option selected" data-gender="male">
                        <i class="fas fa-male"></i> 男
                    </div>
                    <div class="gender-option" data-gender="female">
                        <i class="fas fa-female"></i> 女
                    </div>
                    <div class="gender-option" data-gender="secret">
                        <i class="fas fa-user-secret"></i> 保密
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">生日</label>
                <div class="date-picker">
                    <select id="year">
                        <option value="">年</option>
                        <!-- 年份选项会通过JS动态生成 -->
                    </select>
                    <select id="month">
                        <option value="">月</option>
                        <!-- 月份选项会通过JS动态生成 -->
                    </select>
                    <select id="day">
                        <option value="">日</option>
                        <!-- 日期选项会通过JS动态生成 -->
                    </select>
                </div>
                <div class="form-hint">生日信息仅自己可见，或按隐私设置展示</div>
            </div>
        </div>
        
        <!-- 详细资料表单 -->
        <div class="form-section">
            <div class="section-title">详细资料</div>
            
            <div class="form-group">
                <label class="form-label" for="location">所在地</label>
                <input type="text" class="form-control" id="location" value="上海市">
                <div class="form-hint">填写城市或地区，最多20个字符</div>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="website">个人网站</label>
                <input type="url" class="form-control" id="website" value="https://travel.example.com">
                <div class="form-hint">请输入完整网址，如https://example.com</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">兴趣标签</label>
                <div class="tags-container">
                    <div class="tag-item selected">旅行</div>
                    <div class="tag-item selected">摄影</div>
                    <div class="tag-item selected">美食</div>
                    <div class="tag-item">音乐</div>
                    <div class="tag-item">电影</div>
                    <div class="tag-item">运动</div>
                    <div class="tag-item add-tag">
                        <i class="fas fa-plus"></i> 添加
                    </div>
                </div>
                <div class="form-hint">最多选择10个标签，帮助他人更好地了解你</div>
            </div>
            
            <div class="form-group">
                <label class="form-label" for="signature">个性签名</label>
                <input type="text" class="form-control" id="signature" value="用镜头记录世界的美好">
                <div class="vip-only">
                    <span class="vip-badge">会员特权</span>
                    高级会员可使用特殊样式签名
                </div>
            </div>
        </div>
        
        <!-- 安全提示 -->
        <div class="safety-tip">
            <i class="fas fa-info-circle"></i>
            <div>完善个人资料有助于提高账号安全性和可信度，我们会严格保护您的隐私信息。</div>
        </div>
        
        <!-- 底部操作按钮 -->
        <div class="action-buttons">
            <button class="btn btn-cancel" id="cancelBtn">取消</button>
            <button class="btn btn-save" id="confirmSaveBtn">保存修改</button>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 生成日期选择器选项
        function initDatePickers() {
            const yearSelect = document.getElementById('year');
            const monthSelect = document.getElementById('month');
            const daySelect = document.getElementById('day');
            
            // 生成年份（1950-2023）
            const currentYear = new Date().getFullYear();
            for (let i = currentYear; i >= 1950; i--) {
                const option = document.createElement('option');
                option.value = i;
                option.textContent = i;
                if (i === 1990) option.selected = true; // 默认选中1990年
                yearSelect.appendChild(option);
            }
            
            // 生成月份
            for (let i = 1; i <= 12; i++) {
                const option = document.createElement('option');
                option.value = i;
                option.textContent = i;
                if (i === 5) option.selected = true; // 默认选中5月
                monthSelect.appendChild(option);
            }
            
            // 生成日期
            function generateDays() {
                daySelect.innerHTML = '<option value="">日</option>';
                const year = parseInt(yearSelect.value);
                const month = parseInt(monthSelect.value);
                
                if (!year || !month) return;
                
                // 计算当月天数
                let daysInMonth;
                if (month === 2) {
                    // 闰年判断
                    daysInMonth = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
                } else if ([4, 6, 9, 11].includes(month)) {
                    daysInMonth = 30;
                } else {
                    daysInMonth = 31;
                }
                
                // 添加日期选项
                for (let i = 1; i <= daysInMonth; i++) {
                    const option = document.createElement('option');
                    option.value = i;
                    option.textContent = i;
                    if (i === 15) option.selected = true; // 默认选中15日
                    daySelect.appendChild(option);
                }
            }
            
            // 初始生成日期
            generateDays();
            
            // 年月变化时重新生成日期
            yearSelect.addEventListener('change', generateDays);
            monthSelect.addEventListener('change', generateDays);
        }
        
        // 性别选择功能
        function initGenderSelection() {
            const genderOptions = document.querySelectorAll('.gender-option');
            genderOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除所有选中状态
                    genderOptions.forEach(opt => opt.classList.remove('selected'));
                    // 添加当前选中状态
                    this.classList.add('selected');
                });
            });
        }
        
        // 标签选择功能
        function initTagSelection() {
            const tagItems = document.querySelectorAll('.tag-item:not(.add-tag)');
            tagItems.forEach(tag => {
                tag.addEventListener('click', function() {
                    this.classList.toggle('selected');
                });
            });
            
            // 添加标签按钮
            document.querySelector('.add-tag').addEventListener('click', function() {
                const newTag = prompt('请输入新标签：');
                if (newTag && newTag.trim() && newTag.length <= 8) {
                    const tagsContainer = document.querySelector('.tags-container');
                    const tagElement = document.createElement('div');
                    tagElement.className = 'tag-item selected';
                    tagElement.textContent = newTag.trim();
                    
                    // 添加点击切换功能
                    tagElement.addEventListener('click', function() {
                        this.classList.toggle('selected');
                    });
                    
                    // 插入到添加按钮前
                    tagsContainer.insertBefore(tagElement, document.querySelector('.add-tag'));
                } else if (newTag) {
                    alert('标签长度不能超过8个字符');
                }
            });
        }
        
        // 初始化页面功能
        function initPage() {
            initDatePickers();
            initGenderSelection();
            initTagSelection();
            
            // 返回按钮
            document.getElementById('backBtn').addEventListener('click', function() {
                if (confirm('您有未保存的修改，确定要离开吗？')) {
                    window.history.back();
                }
            });
            
            // 顶部保存按钮
            document.getElementById('saveBtn').addEventListener('click', saveChanges);
            
            // 底部保存按钮
            document.getElementById('confirmSaveBtn').addEventListener('click', saveChanges);
            
            // 取消按钮
            document.getElementById('cancelBtn').addEventListener('click', function() {
                if (confirm('确定要取消修改吗？所有未保存的更改将会丢失')) {
                    window.history.back();
                }
            });
            
            // 更换头像
            document.getElementById('changeAvatar').addEventListener('click', function() {
                alert('请选择图片上传方式：\n1. 从相册选择\n2. 拍照');
            });
        }
        
        // 保存修改
        function saveChanges() {
            // 收集表单数据（实际应用中会发送到服务器）
            const formData = {
                username: document.getElementById('username').value,
                nickname: document.getElementById('nickname').value,
                bio: document.getElementById('bio').value,
                gender: document.querySelector('.gender-option.selected').dataset.gender,
                birthday: `${document.getElementById('year').value}-${document.getElementById('month').value}-${document.getElementById('day').value}`,
                location: document.getElementById('location').value,
                website: document.getElementById('website').value,
                signature: document.getElementById('signature').value,
                tags: Array.from(document.querySelectorAll('.tag-item.selected:not(.add-tag)')).map(tag => tag.textContent)
            };
            
            // 简单验证
            if (!formData.username.trim()) {
                alert('请输入用户名');
                return;
            }
            
            if (formData.username.length > 20) {
                alert('用户名不能超过20个字符');
                return;
            }
            
            // 显示保存成功提示
            alert('资料修改已保存成功！');
            window.history.back();
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>
</html>
